<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>顾客管理</title>
<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${root}/static/js/vue.min.js"></script>
<script type="text/javascript" src="${root}/static/js/axios.min.js"></script>
</head>
<body>
	<div id="app" class="container-fluid">
		<div class="col-md-2" style="margin-top: 20px">
			<button class="btn btn-info" @click="add()">添加</button>
		</div>
		<div class="col-md-3" style="margin-top: 20px">
			<input type="text" v-model="ctid" @keyup="search()"
				placeholder="请输入顾客身份证号关键字" class="form-control" />
		</div>
		<div class="col-md-2" style="margin-top: 20px">
			<button @click="all()"
				class="btn btn-default glyphicon glyphicon-search">所有顾客</button>
		</div>
		<table class="table">
			<caption>顾客列表</caption>
			<thead>
				<tr>
					<th>身份证号</th>
					<th>身份证图片</th>
					<th>驾驶证图片</th>
					<th>客户姓名</th>
					<th>客户性别</th>
					<th>客户地址</th>
					<th>手机号码</th>
					<th>客户职业</th>
					<th>信息备注</th>
					<th>顾客状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in pager.items">
					<td>{{item.ctid}}</td>
					<td><button @click="show1(item.ctid)" class="btn btn-info">查看</button></td>
					<td><button @click="show2(item.ctid)" class="btn btn-info">查看</button></td>
					<td>{{item.ctname}}</td>
					<td>{{item.ctsex}}</td>
					<td>{{item.ctaddr}}</td>
					<td>{{item.ctphone}}</td>
					<td>{{item.ctcareer}}</td>
					<td>{{item.ctdesc}}</td>
					<td>{{item.csstatuszh}}</td>
					<td v-if="item.ctstatus == 501">
					<a @click="update(item)"href="javascript:void(0);">
							<button class="btn btn-info">修改</button>
					</a> <a @click="lock(item.ctid)" href="javascript:void(0);">
							<button class="btn btn-info">锁定</button>
					</a> <a @click="out(item.ctid)" href="javascript:void(0);">
							<button class="btn btn-info">注销</button>
					</a></td>
					<td v-if="item.ctstatus == 102"><a @click="unlock(item.ctid)"
						href="javascript:void(0);">
							<button class="btn btn-info">解锁</button>
					</a> <a @click="out(item.ctid)" href="javascript:void(0);">
							<button class="btn btn-info">注销</button>
					</a></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="11">
						<ul class="pagination">
							<li><a href="javascript:void(0);" @click="list(1)">&laquo;</a></li>
							<li><a href="javascript:void(0);"
								@click="list(pager.begin-pager.step)">&larr;</a></li>
						</ul>
						<ul class="pagination" v-for="n in pager.end+1-pager.begin">
							<li :class="pager.begin+n-1==pager.index?'active':''"><a
								href="javascript:void(0);" @click="list(pager.begin+n-1)">{{pager.begin+n-1}}</a>
							</li>
						</ul>
						<ul class="pagination">
							<li><a href="javascript:void(0);"
								@click="list(pager.begin+pager.step)">&rarr;</a></li>
							<li><a href="javascript:void(0);" @click="list(pager.page)">&raquo;</a></li>
						</ul>
					</td>
				</tr>
			</tfoot>
		</table>
		<div id="mymodal" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 id="title">标题</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" @submit.prevent method="post">
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">身份证号:</label>
								<div class="col-sm-4">
									<input type="text" id="ctid" :value="cust.ctid"
										:readonly="readonly" class="form-control" required
										placeholder="请输入身份证号" />
								</div>
								<p class="col-sm-4 help-block">身份证号不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">身份证图片:</label>
								<div class="col-sm-4">
									<input type="file" id="ctidinfo" class="form-control" required
										placeholder="请选择身份证图片"
										accept="image/bmp,image/png,image/jpg,image/jpeg" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">驾驶证图片:</label>
								<div class="col-sm-4">
									<input type="file" id="ctdidinfo" class="form-control" required
										placeholder="请选择驾驶证图片"
										accept="image/bmp,image/png,image/jpg,image/jpeg" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">客户姓名:</label>
								<div class="col-sm-4">
									<input type="text" id="ctname" :value="cust.ctname"
										class="form-control" required placeholder="请输入客户姓名" />
								</div>
								<p class="col-sm-4 help-block">客户姓名不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择客户性别:</label>
								<div class="col-sm-4">
									<select id="ctsex" class="form-control">
										<option v-for="sex in sexs">{{sex.dtvalue}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择客户职业:</label>
								<div class="col-sm-4">
									<select id="ctcareer" class="form-control">
										<option v-for="career in careers">{{career.dtvalue}}</option>
									</select>
								</div>
							</div>
							<!--String , String , String  -->
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">客户手机号码:</label>
								<div class="col-sm-4">
									<input type="text" id="ctphone" :value="cust.ctphone"
										class="form-control" required placeholder="请输入客户手机号" />
								</div>
								<p class="col-sm-4 help-block">手机号码不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">客户地址:</label>
								<div class="col-sm-4">
									<input type="text" id="ctaddr" :value="cust.ctaddr"
										class="form-control" required placeholder="请输入客户地址" />
								</div>
								<p class="col-sm-4 help-block">客户地址不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">客户描述:</label>
								<div class="col-sm-4">
									<textarea id="ctdesc" :value="cust.ctdesc" rows="5" cols="10"
										class="form-control" required></textarea>
								</div>
								<p class="col-sm-4 help-block">客户描述不能为空</p>
							</div>
							<div class="form-group">
								<div class="col-sm-4 col-sm-offset-4">
									<input type="hidden" id="op" /> <input type="submit"
										class="btn btn-default" value="确定" @click="save()" /> <input
										type="button" data-dismiss="modal" class="btn btn-default"
										value="取消" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div id="showmodal1" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<img class="img-thumbnail" :src="'${root}/cust/showctid?id='+id" />
					</div>
				</div>
			</div>
		</div>
		<div id="showmodal2" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<img class="img-thumbnail" :src="'${root}/cust/showctdid?id='+id" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data : {
				index : 1,
				size : 5,
				step : 5,
				ctid : "",
				pager : {},
				sexs : {},
				careers : {},
				cust : {},
				title : "",
				readonly : true,
				id:"0"
			},
			methods : {
				list : function(index) {
					var self = this;
					self.index = index;
					var url = "${root}/cust/list?ctid=" + self.ctid + "&index="
							+ self.index + "&size=" + self.size + "&step="
							+ self.step;
					axios.get(url).then(function(res) {
						self.pager = res.data;
					});
				},
				search : function() {
					var self = this;
					self.index = 1;
					self.list(self.index);
				},
				all : function() {
					var self = this;
					self.ctid = "";
					self.index = 1;
					self.list(self.index);
				},
				getSex : function() {
					var self = this;
					var url = "${root}/dict/list?tid=9";
					axios.get(url).then(function(res) {
						self.sexs = res.data
					});
				},
				getCareer : function() {
					var self = this;
					var url = "${root}/dict/list?tid=10";
					axios.get(url).then(function(res) {
						self.careers = res.data
					});
				},
				add : function() {
					var self = this;
					self.cust = {};
					self.readonly = false;
					self.title = '顾客信息添加';
					$("#ctidinfo").val("");
					$("#ctdidinfo").val("");
					$("#op").val("add");
					$("#mymodal").modal('show');
					
					
					//测试数据
					//身份证号(15位、18位数字)：pattern="^\d{15}|\d{18}$" 
					//手机：pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" 
					var mm = Math.random();
					var num = Math.round(mm * 1000000000000);
					self.cust.ctid = num;
					self.cust.ctname="客户";
					self.cust.ctphone="13354782447";
					self.cust.ctaddr="广东佛山";
					self.cust.ctdesc="这是一条顾客描述";
				},
				update : function(item) {
					var self = this;
					self.cust = item;
					self.readonly = true;
					self.title = '顾客信息修改';
					$("#ctidinfo").val("");
					$("#ctdidinfo").val("");
					$("#mymodal").modal('show');
				},
				lock : function(ctid) {
					var self = this;
					var url = "${root}/cust/lock?ctid=" + ctid;
					axios.get(url).then(function(res) {
						alert(res.data.message);
						self.list(self.index);
					});
				},
				unlock : function(ctid) {
					var self = this;
					var url = "${root}/cust/unlock?ctid=" + ctid;
					axios.get(url).then(function(res) {
						alert(res.data.message);
						self.list(self.index);
					});
				},
				out : function(ctid) {
					var self = this;
					var url = "${root}/cust/out?ctid=" + ctid;
					axios.get(url).then(function(res) {
						alert(res.data.message);
						self.list(self.index);
					});
				},
				save : function() {
					var count = 0;
					var self = this;
					var ctid = document.getElementById("ctid");
					var ctname = document.getElementById("ctname");
					var ctphone = document.getElementById("ctphone");
					var ctaddr = document.getElementById("ctaddr");
					var ctdesc = document.getElementById("ctdesc");

					if (ctid.validity.valueMissing) {
						ctid.setCustomValidity("身份证号码不能为空");
					} else {
						ctid.setCustomValidity("");
						count++;
					}

					var ctidinfo = $('#ctidinfo')[0].files[0];
					if (ctidinfo.length == 0) {
						alert('请上传身份证图片');
					} else {
						count++;
					}

					var ctdidinfo = $('#ctdidinfo')[0].files[0];
					if (ctdidinfo.length == 0) {
						alert('请上传驾驶证图片');
					} else {
						count++;
					}

					if (ctname.validity.valueMissing) {
						ctname.setCustomValidity("客户姓名不能为空");
					} else {
						ctname.setCustomValidity("");
						count++;
					}

					if (ctphone.validity.valueMissing) {
						ctphone.setCustomValidity("客户手机号码不能为空");
					} else {
						ctphone.setCustomValidity("");
						count++;
					}
					if (ctaddr.validity.valueMissing) {
						ctaddr.setCustomValidity("客户住址不能为空");
					} else {
						ctaddr.setCustomValidity("");
						count++;
					}
					if (ctdesc.validity.valueMissing) {
						ctdesc.setCustomValidity("客户描述不能为空");
					} else {
						ctdesc.setCustomValidity("");
						count++;
					}

					if (count == 7) {
						var url;
						if ($("#op").val() == "add") {
							url = "${root}/cust/add";
						} else {
							url = "${root}/cust/update";
						}
						var fd = new FormData();
						fd.append("ctid", ctid.value);
						fd.append("ctname", ctname.value);
						fd.append("ctphone", ctphone.value);
						fd.append("ctaddr", ctaddr.value);
						fd.append("ctdesc", ctdesc.value);
						fd.append("ctsex", $("#ctsex").val());
						fd.append("ctcareer", $("#ctcareer").val());
						fd.append("ctidinfo", ctidinfo);
						fd.append("ctdidinfo", ctdidinfo);
						axios.post(url, fd).then(function(res) {
							alert(res.data.message);
							$("#mymodal").modal("hide");
							self.list(self.index);
						});
					}
				},
				show1:function(id){
					var self = this;
					self.id=id;
					$("#showmodal1").modal("show");
				},
				show2:function(id){
					var self = this;
					self.id=id;
					$("#showmodal2").modal("show");
				}
			},
			mounted : function() {
				this.list(this.index);
				this.getSex();
				this.getCareer();
			}
		})
	</script>
</body>
</html>